<template>
  <div>
    <button>{{ v }}</button>
    <button @click="incr">+</button>
    <div>{{ people }}</div>
    名字：<input v-model="currentName" /> 年龄：<input v-model="currentAge" />
    <button @click="add">添加</button>
  </div>
</template>
<script lang="js" setup>
import {ref,reactive} from 'vue'
// vue3中 声明 简单类型变量使用ref
// 声明复杂类型 [] {} 使用reactive
const v = ref(2)
const incr = () =>{
    v.value = v.value + 1
}

const people = reactive([{name:'zhangsan',age:11},{name:'lisi',age:12}])
// reactive 后不允许整体再赋值 但是不用.value取值
const currentName = ref('')
const currentAge = ref(0)
const add =  () => {
    console.log(currentName,currentAge)
    console.log(currentName.value,currentAge.value)
    people.push({
        name:currentName.value,
        age:currentAge.value
    })
}
</script>
